<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>商品详情</title>
        <style>
        html,body{
            width:100%;
            height:100%;
            margin:0px auto;
        }
        .mainDiv{
            width:100%;
            height:100%;
            margin:0px auto;
        }
        .dingbu{
            background-color:black;
            width:100%;
            height:100px;
        }
        #shou{
            padding-top:15px;
            font-size:50px;
            font-style:bold;
            color:white;
            text-align:center;
        }
        .zhongjian{
            margin:40px auto 0px auto;
            width:80%;
            height:800px;
            display:flex;
        }
        .zuo{
            width:50%;
        }
        #mm{
            height:500px;
            width:100%;
        }
        #shipin{
            width:100%;
            height:500px;
        }
        .you{
            width:50%;
            background-color:rgb(236, 214, 225)
        }
        .youtext{
            margin:50px auto;
            text-indent:50px;
            width:90%;
            height:90%;
            font-size:35px;
        }
        .di{
            margin:50px auto;
            width:100%;
            display:flex;
            justify-content:space-around;
        }
        .di a{
            background-color:black;
            padding-top:18px;
            width:200px;
            height:50px;
            color:white;
            font-size:22px;
            cursor:pointer;
            text-decoration:none;
        }
        .di a:hover{
            background-color:rgba(248, 246, 247, 0.977);
            color:black;
        }
        #xulie{
            text-align:center;
            width:140px;
            height:40px;
            font-size:20px;
            border-radius:5px;
            margin-left:50px;
            cursor:pointer;
        }
        p{
            color:gray;
        }
        .tupian{
            margin-top:50px;
            height:250px;
            width:100%;
            display:flex;
            justify-content:space-around;
        }
        .tupian img{
          width:220px;
          height:200px;
          cursor:pointer;
        }
        .tupian img:hover{  
            width:230px;
            height:230px;
        }
        .vv{
            margin-top:18px;
        }
        #quantity{
            width:100px;
        }
        </style>
          <script type="text/javascript">
            window.onload = function() {
                var quantityInput = document.getElementById("quantity");
                var increaseBtn = document.getElementById("increaseBtn");
                var decreaseBtn = document.getElementById("decreaseBtn");
    
                increaseBtn.addEventListener("click", function() {
                    var quantityValue = parseInt(quantityInput.value);
                    quantityInput.value = quantityValue + 1;
                });
    
                decreaseBtn.addEventListener("click", function() {
                    var quantityValue = parseInt(quantityInput.value);
                    if (quantityValue > 1) {
                        quantityInput.value = quantityValue - 1;
                    }
                });
            };
        </script>

    </head>
    <body> 
        <div class="mainDiv">
            <div class="dingbu">
            <div id="shou">GraceVita官方旗舰店</div>
            </div>

            <div class="zhongjian">
            <div class="zuo">
                <div id="mm">
                <video id="shipin" src="../static/mp4/one.mp4" controls ></video>
                </div>
                <div class="tupian">
                    <img src="../static/img/Bao1.jpg">
                    <img src="../static/img/two.jpg">
                    <img src="../static/img/three.jpg"> 
                </div>
            </div>
            <div class="you">
                <div class="youtext">
                <div>Teint Idole Ultra Wear</div>
                <div>持妆粉底液</div>
                <p>价格：<h2 style="color:red">$319</h2></p>
                <p>保障:<h5 style="color:red">买贵必赔 退货运费险 7天无理由退货</h5></p>
                <select id="xulie" name="yanse">
                    <option value="1">PO-01象牙白</option>
                    <option value="1">PO-03自然白</option>
                    <option value="1">P-01 陶瓷白</option>
                    <option value="1">B-01暖阳白</option>
                    <option value="1">BO-03健康色</option>
                </select>  
                <div class="vv">
                    <font size="5" color="gray">数量:</font>
                    <button value="+" id="increaseBtn">+</button>
                    <input type="text" value="1" id="quantity">
                    <button value="-" id="decreaseBtn" readonly>-</button>
                </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
                <div class="di">
                    <a href ="./gouwu.html"  target="_blank">加入购物车</a>
                    <a href ="./saoma.html"  target="_blank">立即购买</a>
                </div>
                </div>
            </div>
            </div>

        </div>

    </body>
</html>